<template>
  <div class="audit">
    <div style="margin-top: 20px; margin-bottom: 20px">
      <span v-if="blogNum">共有{{ blogNum }}条博客待审核</span>
      <span v-else>共有0条博客待审核</span>
      <!-- 查询 -->
      <el-input
        style="width: 200px; margin-left: 100px"
        v-model="search"
        size="large"
        placeholder="输入关键字搜索"
      />
      <el-badge
        :value="tables.length ? tables.length : 0"
        class="item"
        style="margin-left: 100px; margin-right: 10px"
      >
        <el-button size="large" @click="toggleSelection(1)">全选</el-button>
      </el-badge>
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-badge
        :value="allapprovedData.length ? allapprovedData.length : 0"
        class="item"
        type="primary"
      >
        <el-button size="large" @click="aKeyAudit">一键审核所选博客</el-button>
      </el-badge>
    </div>
    <el-table
      max-height="500px"
      :row-key="getRowKeys"
      ref="multipleTable"
      :data="
        tables ||
        tableData.filter(
          (data) =>
            !search ||
            data.user.username.toLowerCase().includes(search.toLowerCase())
        )
      "
      tooltip-effect="dark"
      style="width: 80%; text-align: center; margin: 0 auto"
      @selection-change="handleSelectionChange"
    >
      <!-- 收缩框 -->
      <el-table-column fixed type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="发布时间">
              <span>{{ timeDetal(props.row.article_createtime) }}</span>
            </el-form-item>
            <el-form-item label="文章id">
              <span>{{ props.row.article_id }}</span>
            </el-form-item>
            <el-form-item label="用户">
              <span>{{ props.row.user.username }}</span>
            </el-form-item>
            <el-form-item label="文章标题">
              <span>{{ props.row.article_title }}</span>
            </el-form-item>
            <el-form-item label="文章内容">
              <span v-html="props.row.article_content">}</span>
            </el-form-item>
            <el-form-item label="文章封面">
              <span v-if="props.row.article_picture">
                <img
                  :src="props.row.article_picture"
                  style="width: 200px; height: 200px"
              /></span>
              <span v-if="!props.row.article_picture"> 无封面 </span>
            </el-form-item>
            <el-form-item label="文章类型">
              <span v-if="props.row.article_public_status == 1">原创</span>
              <span v-if="props.row.article_public_status == 0">转载</span>
            </el-form-item>
            <el-form-item label="摘要">
              <span>{{ props.row.article_summary }}</span>
            </el-form-item>

            <el-form-item label="发布形式">
              <span v-if="props.row.original_or_reprint == 1">公开</span>
              <span v-if="props.row.original_or_reprint == 0">私密</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- show-overflow-tooltip当内容过长被隐藏时显示  -->
      <el-table-column fixed type="selection" reserve-selection width="55">
      </el-table-column>
      <el-table-column label="发布时间" width="250" show-overflow-tooltip>
        <template slot-scope="scope">{{
          timeDetal(scope.row.article_createtime)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="article_id"
        label="文章id"
        width="250"
        sortable
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="user.username"
        label="用户"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="article_title"
        label="文章标题"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        prop="article_summary"
        label="摘要"
        width="250"
        show-overflow-tooltip
      >
      </el-table-column>

      <!-- 操作 -->
      <el-table-column fixed="right" label="审核" width="120">
        <template slot-scope="scope">
          <el-button
            type="success"
            icon="el-icon-check"
            circle
            @click="Approved(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-close"
            circle
            @click="Unapprove(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// 引入混入
import { mixin } from "../../mixin";
// import { sendWSPush } from "../../api/websocket";
export default {
  name: "UserBlogReview",
  data() {
    return {
      approvedData: [], //审核通过的id数组
      unapprovedData: [], //审核不通过的id数组
      allapprovedData: [], //所有要审核的id数组
      allapprovedTrueData: [], //所有要审核通过的id数组
      allapprovedFalseData: [], //所有要审核通过的id数组
      page: 1, //页码（默认为1）
      total_number: 1, //总页数，默认1页
      // 博客内容审核
      search: "", //查询
      tableData: [], //表格数据
      multipleSelection: [], //存入的是选择后的数据
      blogNum: "",
      getSocketData: "", //发送失败消息
      message: "",
    };
  },
  mixins: [mixin],

  computed: {
    // 模糊搜索
    tables() {
      const search = this.search;
      for (var i = 0; i < this.tableData.length; i++) {
        this.$set(
          this.tableData[i],
          "username",
          this.tableData[i].user.username
        );
      }
      if (search) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableData.filter((data) => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some((key) => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).toLowerCase().indexOf(search) > -1;
          });
        });
      }
      return this.tableData;
    },
  },

  methods: {
    // element表格固定写法
    toggleSelection(rows) {
      if (rows) {
        // 全选
        this.$refs.multipleTable.toggleAllSelection();
      } else {
        // 取消全选
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      // 将选择的数据存入multipleSelection中
      this.multipleSelection = val;
      // 将multipleSelection中的article_id存入到allapprovedData中
      this.allapprovedData = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.allapprovedData.push(this.multipleSelection[i].article_id);
      }
    },
    // element表格固定写法
    getRowKeys(row) {
      return row.article_id;
    },

    // 加载页面数据
    showBlog() {
      this.$http({
        method: "post",
        url: "search/queryAllPublishedBlogs",
        params: {
          pageNum: this.page, //传递分页(没用)
          pageSize: 1000,
        },
      }).then(({ data }) => {
        console.log("页面渲染", data);
        // this.total_number = data.data[0].pages;
        this.tableData = [];
        this.blogNum = "";
        if (data.flag) {
          // 将后端传过来的数据存入tableData中
          this.tableData = data.data[0].list;
          console.log("chang", this.tableData.length);
          // 将后端传过来的数据条数存入blogNum中
          this.blogNum = data.data[0].total;
        }
      });
      this.allapprovedData = []; //清空approvedData
      this.toggleSelection(); //取消全选
    },

    // 审核通过
    Approved(idValue) {
      // 提示信息element
      const h = this.$createElement;
      this.$msgbox({
        //弹框element写法
        title: "消息",
        message: h("p", null, [h("span", null, "确定通过审核 ")]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            this.approvedData.push(idValue.article_id); //将获取到的id存入到approvedData中
            // 连接审核接口
            this.$http({
              method: "post",
              url: `jurisdiction/blogSensitiveWordsFilter?article_id=${this.approvedData}`,
            }).then(({ data }) => {
              // console.log("我是审核", data);
              if (!data.flag) {
                // 提示信息
                this.$message({
                  type: "success",
                  message: "审核成功",
                });
              } else {
                // 提示信息
                this.$message({
                  type: "info",
                  message: "审核失败",
                });
              }
              // 连接改变状态接口
              this.$http({
                method: "post",
                url: `jurisdiction/changeTheStatusOfThePassedArticleToOne?article_id=${this.approvedData}`,
              }).then(() => {
                // console.log("dier", data);
              });
            });
            //弹框element写法
            // 点击确定之后500毫秒消失
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 500);
          } else {
            done();
          }
        },
      }).then(() => {
        // 重新渲染页面
        this.showBlog();
      });
    },
    // 审核不通过
    Unapprove(unIdValue) {
      this.$prompt("请输入审核不通过的原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputValidator: (value) => {
          // 点击按钮时，对文本框里面的值进行验证
          if (!value) {
            return "请输入审核不通过的原因！";
          } else if (value.trim().length < 10) {
            return "审核不通过的原因不可低于10个字！";
          } else {
            this.message = value;
          }
          // console.log(value);
        },
      })
        .then(() => {
          this.unapprovedData.push(unIdValue.article_id); //将获取到的id存入到approvedData中
          // 调用接口
          if (this.unapprovedData) {
            this.$http({
              method: "post",
              // url: `jurisdiction/blogSensitiveWordsFilter?article_id=${this.unapprovedData}`,
              url: `jurisdiction/changeTheStatusOfUnsuccessfulArticlesToZero?article_id=${this.unapprovedData}&message=${this.message}`,
            }).then(({ data }) => {
              // console.log(this.message);
              // sendWSPush(this.message);
              if (data.flag) {
                // 提示信息
                this.$message({
                  type: "success",
                  message: "审核成功!",
                });
                this.value = "";
              } else {
                //提示信息
                this.$message({
                  type: "info",
                  message: "审核失败！",
                });
              }
              this.showBlog();
            });
          } else {
            this.$message.error("请输入该博客审核不通过的原因！");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },

    // 一键审核
    aKeyAudit() {
      // 提示信息element
      const h = this.$createElement; //弹框element写法
      this.$msgbox({
        title: "消息",
        message: h("p", null, [h("span", null, "确定一键审核所选博客 ")]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            console.log("all", this.allapprovedData);
            if (this.allapprovedData.length > 0) {
              //判断是否选择了博客
              this.$http({
                method: "post",
                url: `jurisdiction/blogSensitiveWordsFilter?article_id=${this.allapprovedData}`,
              }).then(({ data }) => {
                if (!data.flag) {
                  this.$message({
                    type: "info",
                    message: "审核失败！",
                  });
                } else {
                  this.$message({
                    type: "success",
                    message: "审核成功",
                  });
                }
                console.log(data.data[1].false);
                // 将审核通过的数据存入allapprovedTrueData中
                this.allapprovedTrueData = data.data[0].true;
                // 将审核未通过的数据存入allapprovedFalseData中
                this.allapprovedFalseData = data.data[1].false;
                //  审核未通过的接口
                this.$http({
                  method: "post",
                  url: `jurisdiction/changeTheStatusOfUnsuccessfulArticlesToZero?article_id=${this.allapprovedFalseData}`,
                }).then(({ data }) => {
                  console.log("一键审核未通过", data);
                });

                // 审核通过的接口
                this.$http({
                  method: "post",
                  url: `jurisdiction/changeTheStatusOfThePassedArticleToOne?article_id=${this.allapprovedTrueData}`,
                }).then(({ data }) => {
                  console.log("一键审核通过", data);
                });
              });
            } else {
              this.$message({
                type: "info",
                message: "请选择要审核的博客",
              });
            }
            //弹框element写法
            // 点击确定之后500毫秒消失
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 500);
          } else {
            done();
          }
        },
      }).then(() => {
        // 重新渲染页面
        this.showBlog();
      });
    },
  },
  mounted() {
    // 连接服务器渲染页面
    this.showBlog();
    //创建websocket
    this.getSocketData = (e) => {
      const data = e && e.detail.data;
      console.log(data);
    };
  },
};
</script>

<style scoped>
/* 内容审核  */
.audit {
  height: 800px;
  margin-right: 20px;
  box-shadow: 0 0 10px 0px rgb(219, 218, 218);
  background-color: #fff;
  padding: 20px 0;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-left: 110px;
  margin-bottom: 10px;
  width: 50%;
}
.audit /deep/.el-icon-arrow-right:before {
  position: absolute;
  font-size: 20px;
  top: -7px;
  left: -10px;
}
.audit {
  text-align: center;
}

.audit /deep/ .el-form--inline .el-form-item__label {
  color: #99a9bf;
}

.audit /deep/ .btn-prev:before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e660";
  /* 必须加 */
  font-family: "iconfont";
  font-size: 20px;
  font-weight: 700;
}
.audit /deep/.btn-next::before {
  /* 想使用的icon的十六制编码，去掉&#x之后的 */
  content: "\e65f";
  /* 必须加 */
  font-family: "iconfont";
  font-size: 20px;
  font-weight: 700;
}
</style>